import React from 'react'
import PropTypes from 'prop-types'
import { Popover } from 'antd'

const defaultStyle = {
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-all',
}

const PopoverTitle = ({
    title, content, titleStyle, contentStyle, children, ...otherProps
}) => (
    <Popover
        title={title ? <h3 style={titleStyle} >{title}</h3> : null}
        content={<div style={{ ...defaultStyle, ...contentStyle }}>{content}</div>}
        placement="bottom"
        {...otherProps}
    >
        {children || content}
    </Popover>
)

PopoverTitle.defaultProps = {
    title: '',
    content: '',
    titleStyle: {
        fontSize: 14, fontWeight: 'bold', color: '#171F24', padding: '10px 0 5px',
    },
    contentStyle: {
        maxWidth: 350,
        paddingBottom: 10,
    },
}

PopoverTitle.propTypes = {
    title: PropTypes.string,
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    titleStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    contentStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
}

export default PopoverTitle
